<template>
  <div class="control" :class="{main: isMain}">
    <div class="music-img" :class="{playing: isPlay}" @click="setIsShowPlayPage(true)">
      <img class="auto-img" :src="currentAudioInfo.singerPic" alt="">
    </div>
    <div class="music-info">
      <div class="music-songname">
        <div class="m-songname one-text">{{currentAudioInfo.songName}}</div>
        <div class="m-singer">- {{currentAudioInfo.singerName}}</div>
      </div>
      <div class="music-icon">
        <div class="m-icon" @click="changeAudioStatus">
          <span class="iconfont" :class="[isPlay ? 'icon-zanting' : 'icon-bofang']"></span>
        </div>
        <div class="m-icon">
          <span class="iconfont icon-bofanggedan"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';

  export default {
    name: 'Control',
    computed: {
      ...mapState(['isMain', 'isPlay', '$audio', 'currentAudioInfo'])
    },

    methods: {
      ...mapMutations(['setIsShowPlayPage', 'setAudioPlayStatus']),

      //播放暂停音频
      changeAudioStatus() {

        if (this.currentAudioInfo.audioId === '') {
          return;
        }


        this.setAudioPlayStatus(!this.isPlay);
        if (this.isPlay) {
          this.$audio.play();
        } else {
          this.$audio.pause();
        }
        
      }
    }
  }
</script>

<style lang="less" scoped>
  .control{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 10px;
    height: 40px;
    background-color: #1F1B3E;
    display: flex;
    transition: bottom .4s ease-out;
    z-index: 999;
    &.main{
      bottom: 60px;
    }
    .m-singer{
      color: #fff;
      font-size: 12px;
      margin-top: 1.5px;
      margin-left: 5px;
    }
    .m-songname{
      font-size: 14px;
      max-width: 100px;
    }
    .music-songname{
      width: calc(100% - 30px - 30px - 10px);
      display: flex;
      align-items: center;
      color: #fff;
      
    }
    .music-info{
      display: flex;
      align-items: center;
      width: calc(100% - 40px - 10px);
      margin-left: 10px;
    }
    .music-icon{
      display: flex;
      .m-icon{
        width: 30px;
        height: 30px;
        background-color: #1F1B3E;
        border-radius: 50%;
        text-align: center;
        &:first-child{
          margin-right: 10px;
        }
        >span{
          font-size: 20px;
          line-height: 30px;

        }
      }
    }
    .music-img{
      width: 40px;
      height: 40px;
      background-color: #ddd;
      border-radius: 50%;
      position: relative;
      top: -10px;
      overflow: hidden;
      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, .5);
      animation: r1 10s linear 0s infinite normal paused;
      &.playing{
        animation-play-state: running;
      }
    }

    @keyframes r1 {
      0% {
        transform: rotateZ(0deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }
  }

  
</style>